<template>
	<view class="page">
		<form @submit="$u.debounce(formSubmit)" class="form">
			<view class="formContent">
				<view class="header">
					<image class="logoSrc" src="@/static/logos.jpg"
						style="width: 100rpx;height: 100rpx; border-radius: 50%;"></image>
					<h2 class="mainTit">{{'欢迎注册'}}金金橙</h2>
					<!-- <h3 class="subTit">{{'开心购物 快乐生活'}}</h3> -->
				</view>

				<!-- <view class="formItem">
					<input type="text" class="input" name="phone" :placeholder="'请输入账号'" v-model="account">
				</view> -->
				<view class="formItem">
					<view class="area">+86</view>
					<input maxlength="11" type="number" class="input phone" name="phone" :placeholder="'请输入手机号'"
						v-model="phone">
				</view>
				<view class="formItem">
					<input type="text" class="input" name="code" :placeholder="'请输入验证码'" v-model="code">
					<view class="sendCode btn-color" v-if="showTime">{{time}}s{{'后重新获取'}}</view>
					<view class="sendCode btn-color" @click="getCode()" hover-class="text-hover" v-else>{{'获取验证码'}}
					</view>
				</view>
				<!-- <view class="formItem">
					<input type="text" class="input" name="code" :placeholder="'请输入邀请码'" v-model="inviter" />
					<view class="sendCode btn-color" hover-class="text-hover">
					</view>
				</view> -->
				<view class="formItem">
					<input type="password" class="input" name="pwd" :placeholder="'请输入密码'" v-model="password">
				</view>
				<view style="display: flex;align-items: center; margin-top: 30rpx;font-size: 26rpx;color: #9a9a9a;">
					<u-checkbox-group v-model="checkboxValue" placement="column">
						<u-checkbox :name="1" activeColor="#fe881e" size="26rpx" label="我已阅读并同意">
						</u-checkbox>
					</u-checkbox-group>
					<text style="color: #fe881e;" @click="NAVPAGE('/pages/home/essay/essay?key=YHXY')">《用户隐私政策》</text>
				</view>

				<view class="formButton">
					<button style="background: linear-gradient(180deg, #FD8E1A 0%, #FF7826 100%);color: #fff;"
						formType="submit" class="button" hover-class="text-hover">{{'立即注册'}}</button>
				</view>

			</view>
		</form>

	</view>
</template>

<script>
	// import graceChecker from "../../api/ graceChecker.js"
	// import agreement from '@/pagesB/components/agreement';
	// import thirdLogin from '@/pagesB/components/thirdLogin';

	// import {
	// 	loginApi,
	// 	sendApi,
	// 	register
	// } from '../../../api/api';
	export default {
		components: {
			// agreement,
			// thirdLogin
		},
		data() {
			return {
				checkboxValue: [1],
				account: '',
				phone: '', //手机号
				code: '', //验证码
				password: '', //密码
				agreement: true, //是否同意协议
				timer: null, //定时器
				isClick: true, //避免用户重复点击
				time: 60, //60s后重置
				showTime: false, //时间与获取验证码切换
				parmas: null, //绑定手机号需要的参数
				providerList: [],
				isWechatShow: false,
				inviter: '', //邀请码
				register_client: '', //客户端环境

			}
		},
		onLoad(option) {
			this.inviter = option.inviter;
			this.shop_id = option.shop_id;


		},
		methods: {
			changeAgree(e) {
				this.agreement = e;
				console.log(this.agreement)
			},
			getCid() {
				// #ifdef APP-PLUS
				// #endif
			},
			formSubmit(e) {
				// if (uni.$u.test.isEmpty(this.account)) {
				// 	uni.showToast({
				// 		title: '请输入账号',
				// 		icon: "none"
				// 	})
				// 	return;
				// }
				if (uni.$u.test.isEmpty(this.phone)) {
					uni.showToast({
						title: '请输入手机号',
						icon: "none"
					})
					return;
				}
				if (!uni.$u.test.mobile(this.phone)) {
					uni.showToast({
						title: '手机号格式有误',
						icon: "none"
					})
					return;
				}
				if (uni.$u.test.isEmpty(this.code)) {
					uni.showToast({
						title: '请输入验证码',
						icon: "none"
					})
					return;
				}
				if (uni.$u.test.isEmpty(this.password)) {
					uni.showToast({
						title: '请输入密码',
						icon: "none"
					})
					return;
				}
				if (this.password.length < 6) {
					uni.showToast({
						title: '密码长度最小6位',
						icon: "none"
					})
					return;
				}
				if (!this.checkboxValue.length) {
					uni.$u.toast('请勾选用户协议')
					return false;
				}
				uni.showLoading()

				this.$api.getRegister({
					// account: this.account,
					phone: this.phone,
					password: this.password,
					// inviter: this.inviter,
					// shop_id: this.shop_id,
					code: this.code
				}).then((res) => {
					uni.hideLoading()
					console.log(res)
					uni.$u.toast(res.info)
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1500);
				}).catch((err) => {
					uni.hideLoading()
					console.log(err);
				})
				//
				// } else {
				// 	this.$toast(graceChecker.error)
				// }
			},
			// 判断是否开启第三方登录
			// getThirdLogin() {
			// 	this.$http.getThirdLogin().then((res) => {
			// 		if (res.status == 200) {
			// 			this.isWechatShow = res.data.open
			// 		}
			// 	})
			// },
			// 获取验证码
			getCode() {
				console.log("验证吗")
				if (this.isClick) {
					if (this.phone.length != 11) {
						return uni.$u.toast('手机格式不正确')
					}
					uni.showLoading()
					this.$api.sendApi({
						phone: this.phone
					}).then((res) => {
						if (res.code == 1) {
							this.showTime = true;
							uni.$u.toast(res.info)
							this.timer = setInterval(() => {
								this.isClick = false;
								this.time = this.time - 1;
								if (this.time <= 0) {
									this.isClick = true;
									this.time = 60;
									this.showTime = false;
									clearInterval(this.timer);
									this.timer = null;
								}
							}, 1000)
						}

					})
				}
			},

			// 跳转
			goTo(path) {
				this.$navigateTo(path);
			}
		},
		// 页面卸载
		onUnload() {
			this.isClick = true;
			this.time = 60;
			// 清空定时器
			clearInterval(this.timer);
			this.timer = null;
		},

	}
</script>
<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.page {
		background: #ffffff;
		height: 100%;

		.form {
			width: 100%;

			.formContent {
				padding-top: 100rpx;
				padding-left: 70rpx;
				padding-right: 70rpx;

				.backBtn {
					position: absolute;
					right: 70rpx;

					image {
						width: 54rpx;
						height: 54rpx;

					}
				}

				.header {
					text-align: left;
					margin-bottom: 34rpx;
					margin-top: 100rpx;

					.logoSrc {
						width: 110rpx;
						height: 110rpx;
						border-radius: 200px;
						position: relative;
						box-shadow: 0 0 0 6rpx #FD8E1A88, 0 0 0 14rpx #FF782633;
					}

					.mainTit {
						font-size: 48rpx;
						color: #333333;
						margin: 20rpx 0;
					}

					.subTit {
						font-size: 28rpx;
						color: #666;
						font-weight: 200;
					}
				}

				.formItem {
					height: 104rpx;
					border-bottom: 1px solid rgba(238, 238, 238, 1);
					display: flex;
					align-items: center;

					.area {
						font-size: 30rpx;
						color: #333;
						padding-right: 34rpx;
						line-height: 1;
						border-right: 1rpx solid #9B9B9B;
					}

					.sendCode {
						background-color: transparent;
						color: #FD8E1A;
					}

					input {
						flex: 1;
						font-size: 30rpx;
						font-weight: 400;

						&.phone {
							padding-left: 33rpx;
						}

						&::-webkit-input-placeholder {
							color: rgba(204, 204, 204, 1);
						}
					}
				}

				.formButton {
					margin-top: 60rpx;
					position: relative;
					margin-bottom: 30rpx;

					button {
						height: 80rpx;
						line-height: 80rpx;
						border-radius: 80rpx;
					}
				}

				.agreement {
					font-size: 24rpx;
					color: #999;
					margin-top: 36rpx;
					padding-left: 8rpx;
					padding-bottom: 20rpx;
					display: flex;
					align-items: center;

					image {
						margin-right: 4rpx;
						width: 25rpx;
						height: 25rpx;
					}

				}
			}

		}

		.other-login {
			margin-top: 70rpx;
			text-align: center;

			.title {
				color: #999999;
			}

			.wrap {
				display: flex;
				justify-content: center;
				margin-top: 30rpx;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.icon-otherLogin {
						width: 55rpx;
						height: 27rpx;
					}
				}
			}
		}
	}
</style>